<template>
<div>
  <div class="goods-main-content container-1200">
    <div class="wy-main-title wy-m-t-20">
          <p>首页  /  物流信息服务  /   <span>货源信息</span></p>
    </div>
    <!-- 按照城市筛选 -->
    <div class="goods-city-choose city-chose">
        <span class="goods-textInd">城市:</span>
        <div class="chose-right">
            <ul>
                <li v-for="(item,index) in cityTab" :class="item==fromCity?'active':''" @click="cityClick(item)" :key="index">{{item||'不限'}}</li>
                <!-- <li :value="item.dictKey" v-for="(item,index) in hotLine" :class="item.dictValue==city?'active':''"  :key="index" @click="cityClick(item.dictValue)">{{item.dictValue}}</li> -->

            </ul>
        </div>
    </div>
    <!-- 按照运输类型筛选 -->
    <div class="goods-city-choose">
        <span style="margin-top:24px;">运输类型:</span>
        <div class="chose-right">
          <ul>
              <li :class="type==''?'active':''" @click="typeClick('')">不限</li>
              <li :class="type=='1'?'active':''" @click="typeClick('1')">零担</li>
              <li :class="type=='2'?'active':''" @click="typeClick('2')">长途整车</li>
              <li :class="type=='3'?'active':''" @click="typeClick('3')">同城包车</li>        
          </ul>
      </div>
    </div>
    <!-- 线路 -->
    <div class="goods-city-choose goods-road-chose">
          <span class="goods-textInd" style="margin-top:27px;">线路：</span>
          <div class="goods-road-way chose-right goods-raod-line">
                  <div>
                      <span>出发地</span>
                      <!-- 只传市 -->
                      <a-input  placeholder="请选择出发地"  v-model="beginPlace" readOnly @click="magSvgShowMap('departureCar')"/>
                  </div>
                  <div>
                      <span>到达地</span>
                      <!-- 只传市 -->
                      <a-input  placeholder="请选择车辆到达地" v-model="endPlace" readOnly @click="magSvgShowMap('destinationCar')"/>
                  </div>
          </div>
    </div>
     <!-- 其他选项 -->
    <div class="goods-city-choose goods-road-chose">
          <span style="margin-top:28px;">其他选项：</span>
          <div class="other-chose chose-right goods-raod-line" style="border:none;">
                  <div class="goods-kg">
                      <span>货源类型</span>
                      <a-select @change="huowuChange" placeholder="请选择货源类型" style="width: 150px;height:40px;" v-model="masterCargoType">
                        <a-select-option value=""> 不限 </a-select-option>
                        <a-select-option value="1"> 轻货 </a-select-option>
                        <a-select-option value="2"> 重货 </a-select-option>
                      </a-select>
                  </div>
                  <div class="goods-kg">
                      <span>货物重量</span>
                      <a-select @change="zhonglianChange" placeholder="请选择货物重量" style="width: 150px;height:40px;" v-model="weightSource">
                              <a-select-option value=""> 不限 </a-select-option>
                              <a-select-option value="0-2"> 0 - 2吨 </a-select-option>
                              <a-select-option value="2-5"> 2 - 5吨 </a-select-option>
                              <a-select-option value="5-10"> 5 - 10吨 </a-select-option>
                              <a-select-option value="10-15"> 10 - 15吨 </a-select-option>
                              <a-select-option value="15-20"> 15 - 20吨 </a-select-option>
                              <a-select-option value="20-25"> 20 - 25吨 </a-select-option>
                              <a-select-option value="25-30"> 25 - 30吨 </a-select-option>
                              <a-select-option value="30-35"> 30 - 35吨 </a-select-option>
                              <a-select-option value="35-40"> 35 - 40吨 </a-select-option>
                              <a-select-option value="40"> 40吨以上 </a-select-option>
                      </a-select>
                  </div>
                  <div class="goods-kg">
                      <span>货物体积</span>
                      <a-select @change="tijiChange" placeholder="请选择货物体积" style="width: 150px;height:40px;" v-model="volumeSource">
                        <a-select-option value=""> 不限 </a-select-option>
                        <a-select-option value="0-50"> 0-50立方米</a-select-option>
                        <a-select-option value="50-75"> 50-75立方米</a-select-option>
                        <a-select-option value="75-100"> 75-100立方米</a-select-option>
                        <a-select-option value="100-150"> 100-150立方米</a-select-option>
                        <a-select-option value="150-200"> 150-200立方米</a-select-option>
                        <a-select-option value="200"> 200立方米以上 </a-select-option>
                      </a-select>
                  </div>
                  <a-button @click="infoGoodsGetCargoByType" type="primary">搜索</a-button>
                  <a-button @click="reset" style="margin-left:20px;">重置</a-button>
          </div>
    </div>
     <!-- 货源信息 -->
    <div class="goods-information-list">
         <!-- 数据展示 -->
            <div class="tender-title">
                  <span></span>
                  <h2>货源信息</h2>
            </div>
            <div class="tender-line"></div>
            <div class="tender-list sell-goods-list">
                <div class="tender-list-title">
                    <ul>
                        <li>货源信息</li>
                        <li>发布者</li>
                        <li>查看</li>
                   </ul>
                </div>
               <!-- 数据列表 -->
              <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="listData">
                    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
                        <div class="invite-box-conent">
                              <div class="goods-pic">
                                <img :src="FileUploadUrl2+item.cargos[0]&&FileUploadUrl2+item.cargos[0].cargoPics.split(',')[0]">
                              </div>
                              <div class="goods-name">
                                  <h4>{{item.beginPlace}}<span></span>{{item.endPlace}}</h4>
                                  <div>
                                        <p>货物信息：
                                          <span>{{item.cargos[0].cargoName}}</span>
                                          <span>/{{item.weight}}吨</span>
                                          <span>/{{item.volume}}立方米</span>
                                          <span v-if="item.type === 1">/零担</span>
                                          <span v-if="item.type === 2">/整车</span>
                                          <span v-if="item.type === 3">/同城</span>
                                        </p>
                                      <p>运输类型：
                                          <span v-if="item.type === 1">零担</span>
                                          <span v-if="item.type === 2">整车</span>
                                          <span v-if="item.type === 3">同城</span>
                                        </p>
                                        <p>货源类型：
                                            <span v-if="item.masterCargoType == 1">轻货</span>
                                            <span v-if="item.masterCargoType == 2">重货</span>
                                        </p>
                                        <p>说明：{{item.remark}}</p>
                                  </div>
                              </div>
                        </div>
                        <div class="invite-box-conent">
                              <h4 v-if="item.type=='1'"> {{item.company}}</h4>
                              <h4 v-if="item.type=='2'"> {{item.company}}</h4>
                              <div class="useStar">
                                  <span>用户星级</span>
                                  <a-rate :defaultValue="item.starLevel" disabled allowHalf />
                                    <div class="attestaion">{{item.attestationStatusValue}}</div>
                              </div>
                        </div>
                        <div class="invite-box-conent">
                              <a-button v-if="loggedIn&&loggedUser.attestationStatus==111" class='goods-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                              <a-button v-if="loggedIn&&loggedUser.attestationStatus!=111" class='goods-sell' type="primary" @click="TipsShowModal(item.userId)">立即沟通</a-button>
                              <router-link v-if="!loggedIn" to="/login"><a-button  class='goods-sell' type="primary">立即沟通</a-button></router-link>
                              <nuxt-link :to="`/info/goods/${item.cargoId}`">
                                    <a-button class=' goods-detail'>查看详情</a-button>
                              </nuxt-link>
                              <span class="goods-times goods-soruce">有效期: {{item.validDay}}天</span>
                              <!-- <span class="goods-times goods-soruce" v-if="item.validDay !=null">有效期: {{item.validDay}}天</span> -->
                              <span class="goods-times">{{item.createTime&&item.createTime.split(' ')[0]}}</span>
                        </div>
                    </a-list-item>
              </a-list>
            </div>
    </div>
  </div>
  <!-- 图片 -->
  <!-- <div class="goods-banner-pic">
      <nuxt-link to="../../corp">
        <img src="./../../../static/img/info/goodsBanner.jpg">
      </nuxt-link>
  </div> -->
       <!-- 立即沟通弹框 -->
    <Elastic :type="type"  ref='elastic'></Elastic>
      <!-- 提示认证弹框 -->
    <Elastics  ref='elastics'></Elastics>
    <!--地图Svg显示位置-->
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
</div>
</template>

<script>
import Elastic from './../../../components/dialog/Elastic'
import Elastics from './../../../components/dialog/Elastics'
import { environment } from './../../../server/environment'
import AuthMixin from '~/mixins/auth'

export default {
  mixins: [ AuthMixin ],
    components: {
      Elastic,
      Elastics
    },
  data () {
      return {
          // 起运地地址
        departureCar: '',
        destinationCar: '',
        departureSupply: '',
        destinationSupply: '',
        departureStorage: '',
        destinationStorage: '',
        beginPlace:'',
        endPlace: '',
        FileUploadUrl2:environment.FileUploadUrl2,
        // 数据列表
        listData: [],
        type: '',
        city: '',
        fromCity:  '',
        toCity: '',
        masterCargoType: '',
        hotLine: [],
        volumeSource: '',//货物体积
        weightSource: '',//货物重量
        // 表格分页
        pagination: {
          pageSizeOptions: ['10', '20', '30', '50', '100'],
          current: 1,
          pageSize: 7,
          // showSizeChanger: true,
          total: 0,
          showTotal: (total, range) => `共 ${total} 条记录`,
          onChange: (page) => {
            this.pagination.current = page
            this.infoGoodsGetCargoByType()
          }
        },
        // 热门城市
        cityTab: [ '','昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市','楚雄市','个旧市','文山市','景洪市','大理市','瑞丽市','泸水市','香格里拉'],
      }
  },
  beforeCreate() {
  },
  created: function() {
    this.infoGoodsGetCargoByType();
    this.infoCommonDict(26);//热门城市
  },
  methods:{
    // 城市查询
    cityClick (fromCity) {
      this.fromCity = fromCity;
      // this.departureCar = city;
      this.infoGoodsGetCargoByType();
    },
    // 运输类型
    typeClick (type) {
      this.type = type;
      this.infoGoodsGetCargoByType();
    },
    // 货源类型
    huowuChange (value) {
      this.masterCargoType = value;
    },
    // 重量类型
    zhonglianChange (value) {
      this.weightSource = value;
    },
    // 体积类型
    tijiChange (value) {
      this.volumeSource = value;
    },
     // 字典数据获取
    async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {

            switch(type){
              case 26: this.hotLine = res.data.rows; break;
            }
             // this.hotLine.unhsift({
             //    dictValue:'不限'
             // })
          } 
      },
    // 获取货源分类列表查询
    async infoGoodsGetCargoByType () {
      const res = await this.$store.dispatch('info/infoGoodsGetCargoByType',{
        pageSize: this.pagination.pageSize,
        pageIndex: this.pagination.current,
        type: this.type,
        fromCity: this.fromCity,
        beginPlace: this.beginPlace,
        endPlace: this.endPlace,
        masterCargoType: this.masterCargoType,
        volumeSource: this.volumeSource,
        weightSource: this.weightSource
      })
      if (res.status) {
        this.listData = res.data.rows;
        this.pagination.total = res.data.total;//数据总数
      } 
    },
    // 重置
    reset(){
      this.masterCargoType = '';//货源类型
      this.type = '';//运输类型
      this.fromCity = '';//城市
      this.beginPlace = '';//出发地
      this.endPlace = '';//到达地
      this.volumeSource = '';//货物体积
      this.weightSource = '';//货物重量
      this.infoGoodsGetCargoByType();
    },
    // 弹框
    elasticShowModal(id){
         this.$refs.elastic.showModal(id);
    },
    TipsShowModal(id){
          this.$refs.elastics.warning(id);
    },
       // 省市地图回调
    mapSvgCall (d) {
      this[d.name] = d.provCityArea;
      if(d.name=='departureCar'){
        this.beginPlace = d.provCityArea;
      }
      if(d.name=='destinationCar'){
        this.endPlace = d.provCityArea;
      }
    },
    // 起运地
    magSvgShowMap (name) {
      this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
    },
    // 调用距离返回
    distanceCall (num) {
    }
  }
}

</script>
<style lang="scss">
@import "./../../../assets/css/info/goodsinfromation.scss";
</style>